<template>
    <div class="parent">
        <div class="top_content">
            <header class="header">
                <x-header class="headerContent" :left-options="{backText: ''}"><span class="title">在线报修</span><a slot="right" class="slotRight" @click="record">报修记录</a></x-header>
            </header>
            <div class="search">
                <SelectRepair @accidentEvent="accidentVal"></SelectRepair>
            </div>
        </div>
        <main class="main">
            <div class="textarea">
                <group class="textParent">
                    <x-textarea class="textareaGroup" :show-counter="false" :height="setHeight" :max="300" placeholder="具体描述下您的问题(限制300字以内)" title="" @on-focus="onEvent('focus')" @on-blur="onEvent('blur')" v-model.trim="textareaContent"></x-textarea>
                </group>
            </div>
            <div class="upload">
                <div class="image-view">
                    <div class="addbox">
                        <input type="file" @change="getImgBase" accept="image/*">
                        <div class="addbtn">
                            <i class="iconfont icon-xiangji"></i>
                            <span>最多可上传4张图</span>
                        </div>
                    </div>
                    <div class="view">
                        <div class="item" v-for="(item, index) in imgBase64" :key="index">
                            <span class="cancel-btn" @click="delImg(index)">x</span>
                            <img :src="item">
                        </div>
                    </div>
                </div>
            </div>
            <div class="cell">
                <ul class="list">
                    <li class="listItem">
                        <div class="inpBox">
                            <span class="iconBox">
                                <i class="iconfont icon-lianxiren icons"></i>
                            </span>
                            <input  class="iconText" type="text" placeholder="请输入联系人姓名" v-model.trim="userName">
                        </div>
                        <div class="choice">
                            <p class="choiceItem" @click="choiceTT('enterprise')">
                                <i class="radio" ref="eChild" v-show="isEE"></i>
                                <i class="radio" ref="eChild" v-show="isE" style="border: 1px solid #F99817; background: #FFC726"></i>
                                <span class="textRadio">女士</span>
                            </p>
                            <p class="choiceItem" @click="choiceTT('personal')">
                                <i class="radio" ref="pChild" v-show="isPP"></i>
                                <i class="radio" ref="pChild" v-show="isP"></i>
                                <span class="textRadio">先生</span>
                            </p>
                        </div>
                    </li>
                    <li class="listItem">
                        <div class="inpBox">
                            <span class="iconBox">
                                <i class="iconfont icon-dizhi icons"></i>
                            </span>
                            <input  class="iconText" type="text" placeholder="请添加地址" v-model.trim="address">
                        </div>
                    </li>
                    <li class="listItem">
                        <div class="inpBox">
                            <span class="iconBox">
                                <i class="iconfont icon-lianxidianhua icons"></i>
                            </span>
                            <input  class="iconText" type="text" placeholder="请输入联系电话(北京)" v-model.trim="iphone">
                        </div>
                    </li>
                </ul>
            </div>
        </main>
        <footer class="footer" @click="submissionBtn">提交</footer>
    </div>
</template>
<script>
import { XHeader, Group, XTextarea, Cell, XSwitch } from 'vux'
import SelectRepair from '@/components/select'
import Qs from 'qs'
export default {
    name: 'Repair',
    data () {
        return {
            show2: false,
            setHeight: 150,
            isE:true,
            isEE:false,
            isP: false,
            isPP: true,
            textareaContent: '',
            accidentValue: '',
            userName: '',
            address: '',
            iphone: '',
            imgBase64:[],
            count: 0,
            sex: '女士'
        }
    },
    components: {
        XHeader,
        Group, 
        XTextarea,
        Cell,
        SelectRepair,
        XSwitch
    },
    methods: {
        //获取图片base64实现预览
        getImgBase(){
            this.count ++
            if (this.count <= 4) {
                const _this = this;
                const event = event || window.event;
                const file = event.target.files[0];
                const size = file.size/1024/1024
                const reader = new FileReader(); 
                if (size < 0.05) { //上传小于0.3M的图片
                    //转base64
                    reader.onload = function(e) {
                        _this.imgBase64.push(e.target.result);
                    }
                    reader.readAsDataURL(file);
                } else {
                    alert('请上传小于0.05M的图片');
                }
            } else {
                alert('最多可上传4张图')
            }
        },
        //删除图片
        delImg(index){
            this.count--
            this.imgBase64.splice(index,1);
        },
        record () {
            this.$router.push({
                path: '/My/Repairrecord'
            })
        },
        onChange () {

        },
        selectorEvent () {
            
        },
        onEvent (event) {
            // console.log(event)
        },
        choiceTT (item) {
            switch (item) {
                case 'enterprise': 
                    this.isE = true;
                    this.isEE = false;
                    this.isP = false;
                    this.isPP = true;
                    this.$refs.eChild.style.background = '#FFC726'
                    this.$refs.eChild.style.border = '1px solid #F99817'
                    this.sex = '女士'
                break;
                case 'personal':
                    this.isP = true;
                    this.isPP = false;
                    this.isE = false;
                    this.isEE = true;
                    this.$refs.pChild.style.background = '#FFC726'
                    this.$refs.pChild.style.border = '1px solid #F99817'
                    this.sex = '先生'
                break;
            }
        },
        submissionBtn () {
            // this.$router.push({
            //     path: '/Home/Successrepair'
            // })
            if (this.accidentValue != '' && this.textareaContent != '' && this.userName != '' && this.address != '' && this.iphone != '') {
                // this.$axios.post('http://192.168.1.26:8080/app/mock/16/api/repairSubmission', Qs.stringify({
                //     accidentValue: this.accidentValue,
                //     textareaContent: this.textareaContent,
                //     imgBase64: this.imgBase64,
                //     userName: this.userName,
                //     sex: this.sex,
                //     address: this.address,
                //     iphone: this.iphone
                // })).then((res) => {
                //     // console.log(res)
                //     this.$router.push({
                //         path: '/Home/Successrepair'
                //     })
                // })
            } else {
                alert('请填写正确的信息')
            }
        },
        accidentVal (msg) {
            this.accidentValue = msg.dm
        }
    }
}
</script>
<style scoped lang="less">
.parent{
    width: 100%;
    height: 100%;
    background: rgba(250, 250, 250, 1);
}
.header{
    width: 100%;
    height: 1.333333rem;
}
.title{
    font-size: 16px;
    font-family:ArialMT;
    color:rgba(255,255,255,1);
    line-height:18px;
    letter-spacing:1px;
}
.headerContent{
    width: 100%;
    height: 100%;
    background:transparent;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}
.slotRight{
    color: #fff !important;
    margin-top: .266667rem;
    font-size:12px;
    font-family:ArialMT;
    line-height:14px;
    letter-spacing:1px;
}
.top_content{
    width: 100%;
    // height: 3.626667rem;
    height: 3.333333rem;
    background:linear-gradient(127deg,rgba(255,199,38,1) 0%,rgba(249,151,22,1) 100%);
    margin-bottom: .266667rem;
}
.main{
    width: 100%;
}
.search{
    width: 100%;
    // height: 2.293333rem;
    height: 2rem;
}
.textarea{
    width: 100%;
    padding: 0 .266667rem;
    background: #fff;
    margin-top: -0.273333rem;
    .textareaGroup{
        border-radius: .106667rem;
        font-size:12px;
        font-family:ArialMT;
        color:rgba(204,204,204,1);
        line-height:14px;
        letter-spacing:1px;
        color: #999;
        border: 1px solid #ccc;
    }
}
.cell{
    width: 100%;
    .list{
        width: 100%;
        .listItem{
            width: 100%;
            height: 1.333333rem;
            padding: 0 .266667rem;
            background: #fff;
            display: flex;
            flex-direction: row;
            justify-content: flex-start;
            align-items: center;
            position: relative;
            .inpBox{
                width: 6.666667rem;
                height: 100%;
                display: flex;
                flex-direction: row;
                justify-content: flex-start;
                align-items: center;
                .iconBox{
                    display: block;
                    width: .933333rem;
                    height: .933333rem;
                    display: flex;
                    flex-direction: row;
                    justify-content: center;
                    align-items: center;
                    
                    .icons{
                        font-size: 18px;
                        color: rgba(255, 199, 38, 1);
                    }
                }
                .iconText{
                    display: block;
                    width: 5.333333rem;
                    height: .933333rem;
                    outline: none;
                    border: none;
                }
                input::-webkit-input-placeholder{
                    font-size:12px;
                    font-family:ArialMT;
                    color:rgba(204,204,204,1);
                    line-height:14px;
                    letter-spacing:1px;
                }
            }
            .choice{
                height: 100%;
                display: flex;
                flex-direction: row;
                justify-content: flex-start;
                align-items: center;
                .choiceItem{
                    height: 100%;
                    display: flex;
                    flex-direction: row;
                    justify-content: flex-start;
                    align-items: center;
                    margin-left: .173333rem;
                    .radio{
                        display: block;
                        width: .373333rem;
                        height:.373333rem;
                        border-radius: 50%;
                        border: 1px solid rgba(0,0,0,0.4);
                        background: rgba(0,0,0,0.2);
                        margin-right: .133333rem;
                    }
                    .textRadio{
                        font-size:12px;
                        color:rgba(82,82,82,1);
                        font-family:ArialMT;
                        line-height:14px;
                        letter-spacing:1px;
                    }
                }
            }
        }
        .listItem:after{
            content: '';
            position: absolute;
            left: 0;
            bottom: 0;
            background: #cccccc;
            width: 100%;
            height: 1px;
            -webkit-transform: scaleY(0.5);
            transform: scaleY(0.5);
            -webkit-transform-origin: 0 0;
            transform-origin: 0 0;
        }
    }
}
.footer{
    position: fixed;
    bottom: 0;
    width: 100%;
    height: 1.28rem;
    font-size: 0.16rem;
    font-size:16px;
    font-family:PingFangSC-Regular;
    font-weight:400;
    color:rgba(255,255,255,1);
    line-height:22px;
    letter-spacing:1px;
    color: #fff;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    background:linear-gradient(118deg,rgba(255,199,38,1) 0%,rgba(249,151,22,1) 100%);
}

.upload{
    width: 100%;
    height: 1.813333rem;
    background: #fff;
    padding: 0 .266667rem;
    padding-top: 0.106667rem;
    // padding-bottom: 0.106667rem;
}
.clearboth::after{
    content:"";
    display:block;
    clear:both;
}
.image-view{
    width:100%;
    height:1.813333rem;
    // border: 1px solid red;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
}
.image-view .addbox{
    position:relative;
    height:1.6rem;
    width:1.6rem;
    text-align:center;
    // margin-left: 0.1rem;
    // border: 1px solid green;
}
.image-view .addbox input{
    position:absolute;
    left:0;
    width:1.6rem;
    height:1.6rem;
    opacity:0;
    border: 1px solid orange;
}
.image-view .addbox .addbtn{
    float:left;
    height:1.6rem;
    width:1.6rem;
    border-radius: .08rem;
    border: 1px solid #ccc;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    i{
        font-size: 18px;
        color:#ccc;
    }
    span{
        font-size: 12px;
        color: #ccc;
    }
}
.image-view .item {
    position:relative;
    float:left;
    width:1.6rem;
    height:1.6rem;
    margin-left: .133333rem;
}
.image-view .item .cancel-btn{
    position:absolute;
    right:-0.05rem;
    top:-0.1rem;
    display:block;
    width:.4rem;
    height:.4rem;
    color:#fff;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    background:rgb(220, 220, 220);
    border-radius: 100%;
    font-size: 13px;
    padding-bottom: .08rem;
}
.image-view .item img{
    display: block;
    width:100%;
    height:100%;
}
.image-view .view{
    clear:both;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
}


// .pic{
//     width: 100%;
//     height: 0.8rem;
//     border: 1px solid red;
//     padding: 0 0.1rem;
//     margin: 0.1rem 0;
//     background: #fff;
//     .picBox{
//         width: 100%;
//         height: 100%;
//         display: flex;
//         flex-direction: row;
//         justify-content: space-between;
//         align-items: center;
//         .imgBox{
//             width: 0.65rem;
//             height: 0.65rem;
//             border: 1px solid #ccc;
//             border-radius: 0.03rem;
//             display: flex;
//             flex-direction: column;
//             justify-content: center;
//             align-items: center;
//             position: relative;
//             z-index: 2;
//             i{
//                 font-size: 0.145rem;
//                 color: #ccc;
//             }
//             span{
//                 font-size: 0.13rem;
//                 color: #ccc;
//             }
//             .upload{
//                 position: absolute;
//                 top: 0rem;
//                 width: 100%;
//                 height: 100%;
//                 outline: none;
//                 border: none;
//                 border: 1px solid red;
//             }
//         }
//     }
// }
</style>
